<template>
  <div>
    <h2>我的借用记录</h2>

    <el-table :data="borrowStore.userBorrowList" :loading="borrowStore.loading" style="width: 100%" border>
      <el-table-column prop="borrowId" label="借用ID" align="center"></el-table-column>
      <el-table-column prop="assetName" label="资产名" align="center"></el-table-column>
      <el-table-column prop="userName" label="用户名" align="center"></el-table-column>
      <el-table-column prop="borrowTime" label="借用时间" align="center">
        <template #default="{ row }">
          {{ DateFormat.format(row.borrowTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="expectedReturnTime" label="预计归还时间" align="center">
        <template #default="{ row }">
          {{ DateFormat.format(row.expectedReturnTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="actualReturnTime" label="实际归还时间" align="center">
        <template #default="{ row }">
          {{ row.actualReturnTime ? DateFormat.format(row.actualReturnTime) : '未归还' }}
        </template>
      </el-table-column>
      <el-table-column prop="quantity" label="数量" align="center"></el-table-column>
      <el-table-column label="是否逾期" align="center">
        <template #default="{ row }">
          <el-tag :type="row.isOverdue ? 'danger' : 'success'">{{ row.isOverdue ? '是' : '否' }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <el-button v-if="!row.actualReturnTime" size="small" type="primary" @click="handleReturn(row.borrowId)"
                     class="return-button">归还
          </el-button>
          <span v-else class="returned-text">已归还</span>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
          :current-page="borrowStore.page"
          :page-size="borrowStore.pageSize"
          :total="borrowStore.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          style="margin: 20px auto; display: flex; justify-content: center;"
      />
    </div>
  </div>
</template>

<script setup>
import {onMounted} from 'vue';
import {useBorrowStore} from '@/stores/user/borrow';
import {ElMessage} from 'element-plus';
import DateFormat from '@/utils/DateFormat.js';

const borrowStore = useBorrowStore();

// 组件挂载时获取数据
onMounted(() => {
  fetchData();
});

// 获取数据
const fetchData = () => {
  borrowStore.getUserBorrowList({
    page: borrowStore.page,
    pageSize: borrowStore.pageSize,
  });
};

// 处理每页显示数量变化
const handleSizeChange = (pageSize) => {
  borrowStore.setPageSize(pageSize);
  fetchData();
};

// 处理当前页码变化
const handleCurrentChange = (page) => {
  borrowStore.setPage(page);
  fetchData();
};

// 处理归还操作
const handleReturn = async (borrowId) => {
  try {
    const success = await borrowStore.returnAsset(borrowId);
    if (success) {
      ElMessage.success('归还成功');
      fetchData(); // 刷新数据
    }
  } catch (error) {
    console.error('归还失败', error);
    ElMessage.error('归还失败');
  }
};
</script>

<style scoped>

h2 {
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}

/* 表格样式 */
.el-table {
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  color: #666;
}

/* 表头样式 */
.el-table .el-table__header-wrapper th {
  background-color: #e9edf2;
  color: #333;
  font-weight: 500;
}

/* 归还按钮样式 */
.return-button {
  background-color: #5cb85c;
  border-color: #5cb85c;
  color: #fff;
}

.return-button:hover {
  background-color: #449d44;
  border-color: #419641;
  color: #fff;
}

/* 已归还文字样式 */
.returned-text {
  color: #999;
}

/* 分页组件样式 */
.pagination {
  display: flex;
  justify-content: center; /* 水平居中 */
  margin-top: 20px;
}
</style>